<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第三天 数据驱动视图</title>
</head>
<body>
	<div id='app'>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//自定义过滤器
		//1.局部过滤器 直接写在对象内 filters:{xxx:function(){ return }}
		//2.全局过滤器 Vue.fiter()
		//
		//如何使用过滤器  {{ 数据属性 | 过滤器名字 }}  管道符

		Vue.filter('myReverse',function(value,arg){
			return arg+' '+value.split('').reverse().join('');
		})

		let App = {
			data(){
				return{
					price:0,
					msg:'hello world'
				}
			},
			template:`
				<div>
					<input type="number" v-model='price'/>
					<h3> {{ price | myCurrentcy}} </h3>
					<h3> {{ msg | myReverse('hahaha')}} </h3>
				</div>
			`,
			filters:{
				//声明过滤器
				myCurrentcy:function(value){
					return "￥" + value
				}
			}
		};
		new Vue({
			el:'#app',
			components:{
				App
			},
			template:`<App/>`
		})
	</script>
</body>
</html>
